<template>
	<view class="center">
		<!-- 用户个人信息 -->
		<view class="center-top">
			<view class="user">
				<view class="user-left">
					<image :src="imgBaseUrl + '/ache/images/user.png'" class="img"></image>
					<view class="user-name" @click="onlogo" v-if="false">
						未登录
						<view class="user-id">点击登录</view>
					</view>
					<view class="user-name" v-if="true">
						疼痛管理店铺
						<view class="user-id">tengtongguanli</view>
					</view>
				</view>
				<view class="edit" @click="onedit"><u-icon name="setting" color="#ffffff" size="40"></u-icon></view>
			</view>
			<!-- 用户订单信息 -->
			<view class="user-order">
				<view class="order-title">
					<view class="title">我的订单</view>
					<view class="allorder" @click="allorder">查看全部订单 ></view>
				</view>
				<view class="order-item">
					<view class="order-icon" @click="Submitted">
						<u-badge type="error" count="7" :offset="offset"></u-badge>
						<view class="item">
							<image :src="imgBaseUrl + '/ache/images/Submitted.png'" class="img"></image>
							<view class="text">已提交</view>
						</view>
					</view>
					<view class="order-icon" @click="received">
						<u-badge type="error" count="7" :offset="offset"></u-badge>
						<view class="item">
							<image :src="imgBaseUrl + '/ache/images/received.png'" class="img"></image>
							<view class="text">待收货</view>
						</view>
					</view>
					<view class="order-icon" @click="complete">
						<u-badge type="error" count="7" :offset="offset"></u-badge>
						<view class="item">
							<image :src="imgBaseUrl + '/ache/images/complete.png'" class="img"></image>
							<view class="text">已完成</view>
						</view>
					</view>
					<view class="order-icon" @click="cancel">
						<u-badge type="error" count="7" :offset="offset"></u-badge>
						<view class="item">
							<image :src="imgBaseUrl + '/ache/images/cancel.png'" class="img"></image>
							<view class="text">已取消</view>
						</view>
					</view>
				</view>
			</view>
			<view class="user-info">
				<view class="user-title">我的工具</view>

				<view class="item" @click="oncancel">
					<view class="item-left">
						<image :src="imgBaseUrl + '/ache/images/cancel.png'" class="img"></image>
						<view class="text">我的邀请</view>
					</view>
					<view class="item-right">></view>
				</view>
				<view class="item" @click="onwallet">
					<view class="item-left">
						<image :src="imgBaseUrl + '/ache/images/wallet.png'" class="img"></image>
						<view class="text">邀请收入</view>
					</view>
					<view class="item-right">></view>
				</view>
				<view class="item" @click="onaddress">
					<view class="item-left">
						<image :src="imgBaseUrl + '/ache/images/address.png'" class="img"></image>
						<view class="text">我的地址</view>
					</view>
					<view class="item-right">></view>
				</view>
			</view>
			<view class="title"><text class="text">猜你喜欢</text></view>
				<goods></goods>
		</view>
	</view>
</template>

<script>
	import goods from '@/components/goods/index.vue'
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			offset: [-10, 20] //角标定位 勿动
		};
	},
	components:{
		goods
	},
	computed: {
		...mapGetters(['imgBaseUrl'])
	},
	methods: {
		//点击跳转设置
		onedit() {
			uni.navigateTo({
				url:'/pages/user-setting/index'
			})
			console.log('设置');
		},
		//未登录时候点击跳转登录
		onlogo() {
			console.log('点击登录');
		},
		//查看全部订单
		allorder() {
			uni.navigateTo({
				url:'/pages/order-list/index'
			})
			console.log('查看全部订单');
		},
		//已提交
		Submitted() {
			console.log('已提交');
		},
		//待收货
		received() {
			console.log('待收货');
		},
		//已完成
		complete() {
			console.log('已完成');
		},
		//已取消
		cancel() {
			console.log('已取消');
		},
		//我的邀请
		oncancel(){
			uni.navigateTo({
				url:'/pages/invite/index'
			})
			console.log('我的邀请');
		},
		//邀请收入
		onwallet(){
			uni.navigateTo({
				url:'/pages/income/index'
			})
			console.log('邀请收入');
		},
		//我的地址
		onaddress(){
			uni.navigateTo({
				url:'/pages/address/index'
			})
			console.log('我的地址');
		}
	}
};
</script>
<style lang="scss">
@import '@/styles/mixin.scss';
.center {
	min-height: 100%;
	background-color: #f5f5f5;
	.center-top {
		width: 100%;
		height: 418rpx;
		border-radius: 0rpx 0rpx 80rpx 80rpx;
		background: linear-gradient(to bottom, #f53942, #ffffff);
		.user {
			padding: 20rpx;
			padding-top: 180rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.user-left {
				display: flex;
				.img {
					width: 100rpx;
					height: 100rpx;
				}
				.user-name {
					padding-left: 20rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #ffffff;
				}
				.user-id {
					padding-top: 10rpx;
					font-size: 20rpx;
					font-weight: normal;
					color: #ffffff;
				}
			}
		}
		.user-order {
			margin: 25rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			background: #ffffff;
			.order-title {
				overflow: hidden;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.title {
					font-size: 26rpx;
					font-weight: bold;
					color: #222222;
				}
				.allorder {
					font-size: 24rpx;
					font-weight: 400;
					color: #888888;
				}
			}
			.order-item {
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: space-between;
				.order-icon {
					width: 100rpx;
					height: 100rpx;
					position: relative;
					text-align: center;
					margin: 10rpx;
					.item {
						.img {
							width: 55rpx;
							height: 55rpx;
						}
						.text {
							padding-top: 10rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #222222;
						}
					}
				}
			}
		}
		.user-info {
			margin: 25rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			background: #ffffff;
			.user-title {
				font-size: 26rpx;
				font-weight: bold;
				color: #222222;
			}
			.item {
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				border-bottom: 1rpx solid #eeeeee;
				.item-left {
					display: flex;
					.img {
						width: 36rpx;
						height: 36rpx;
					}
					.text {
						padding-left: 10rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #222222;
					}
				}
			}
		}
		.title{
			margin: 20rpx;
			font-weight: bold;
			text-align: center;
			.text {
				font-size: 30rpx;
			}
		}
	}
}
</style>
